<template>
  <div style="display:flex;justify-content: space-between">
      <div class="left">
    <img src="../assets/file.png" alt="">
    <div class="item">
      <div class="top">
        <div class="left">
          <tiny-icon-filetext></tiny-icon-filetext>
        </div>
        <div class="right">
          <div class="title">
            python学习资料
          </div>
          <div class="time">
            <tiny-icon-time></tiny-icon-time>
            2019-09-09
          </div>
        </div>
      </div>
      <div class="btm">
        <tiny-tag type="success">
          <tiny-icon-language></tiny-icon-language>
          python
        </tiny-tag>
        <tiny-tag type="danger">
          <tiny-icon-user></tiny-icon-user>
          yuwei
        </tiny-tag>
        <tiny-tag>
          <tiny-icon-eyeopen></tiny-icon-eyeopen>
          浏览量：100
        </tiny-tag>
      </div>
    </div>
      <div class="item">
      <div class="top">
        <div class="left">
          <tiny-icon-filetext></tiny-icon-filetext>
        </div>
        <div class="right">
          <div class="title">
            python学习资料
          </div>
          <div class="time">
            <tiny-icon-time></tiny-icon-time>
            2019-09-09
          </div>
        </div>
      </div>
      <div class="btm">
        <tiny-tag type="success">
          <tiny-icon-language></tiny-icon-language>
          python
        </tiny-tag>
        <tiny-tag type="danger">
          <tiny-icon-user></tiny-icon-user>
          yuwei
        </tiny-tag>
        <tiny-tag>
          <tiny-icon-eyeopen></tiny-icon-eyeopen>
          浏览量：100
        </tiny-tag>
      </div>
    </div>
      <div class="item">
      <div class="top">
        <div class="left">
          <tiny-icon-filetext></tiny-icon-filetext>
        </div>
        <div class="right">
          <div class="title">
            python学习资料
          </div>
          <div class="time">
            <tiny-icon-time></tiny-icon-time>
            2019-09-09
          </div>
        </div>
      </div>
      <div class="btm">
        <tiny-tag type="success">
          <tiny-icon-language></tiny-icon-language>
          python
        </tiny-tag>
        <tiny-tag type="danger">
          <tiny-icon-user></tiny-icon-user>
          yuwei
        </tiny-tag>
        <tiny-tag>
          <tiny-icon-eyeopen></tiny-icon-eyeopen>
          浏览量：100
        </tiny-tag>
      </div>
    </div>

  </div>
  <div class="Right">
    <card></card>
    <div class="text">上传即分享，让智慧触手可及</div>
    <div>
      <ul>
        <li> 遵守法律法规，不得上传违法内容</li>
        <li> 如有版权问题，请自行负责</li>
        <li> 不得包含恶意软件或病毒</li>
      </ul>

    </div>
  </div>
  </div>
</template>

<script setup>
import {Tag as TinyTag} from '@opentiny/vue'
import {IconFiletext, IconEyeopen, IconTime, IconLanguage, IconUser} from '@opentiny/vue-icon'
import card from "../components/card.vue"
const TinyIconFiletext = IconFiletext()
const TinyIconEyeopen = IconEyeopen()
const TinyIconTime = IconTime()
const TinyIconLanguage = IconLanguage()
const TinyIconUser = IconUser()


</script>

<style scoped lang="less">
img {
  width: 57vw;
  height: 15vw;
}

.left {
  width: 57vw;
}

.item {
  width: 99%;
  margin: 10px auto;
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #E6E6E6;
  padding: 10px;

  .top {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;

    .left {
      width: 40px;
      height: 40px;
      background-color: #F0F2F5;
      border-radius: 10px;
      text-align: center;
      margin-right: 10px;

      .tiny-svg {
        fill: #A8ABB2;
        line-height: 40px;
        font-size: 30px;
        transform: translateY(3px);
      }
    }

    .right {
      .title {
        letter-spacing: 2px;
        line-height: 30px;
      }

      .time {
        color: #A8ABB2;
        font-size: 14px;

        .tiny-svg {
          fill: #A8ABB2;

        }
      }

    }
  }

  .btm {

    .tiny-svg {
      margin-right: 3px;

    }
  }


}

.tiny-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
.Right{
  background-color: #FFFFFF;
  height: 100vh;
  flex:1;
  padding:20px;
  border-left: 1px solid #E6E6E6;
}
.text{
  display: block;
  margin-top:30px;
  color:#096dd9;
  letter-spacing: 2px;
}
ul{
  margin:10px;
  color:#A8ABB2;
}
</style>